<template>
  <div class="login_style">
    <el-form :model="formLabelAlign" status-icon :rules="rules" ref="formLabelAlign" label-width="80px" style="margin-top:50px">
      <el-form-item label="用户名:" prop="name">
        <el-input v-model="formLabelAlign.name" style="width:200px" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input v-model="formLabelAlign.password" style="width:200px" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="验证码:" prop="type">
        <el-input v-model="formLabelAlign.type" style="width:200px" autocomplete="off"></el-input>
        <div class="login-code" @click="refreshCode">
          <!--验证码组件-->
            <s-identify :identifyCode="identifyCode"></s-identify>
        </div>
      </el-form-item>
        <el-form-item>
            <el-radio v-model="radio" label="p">普通用户</el-radio>
            <el-radio v-model="radio" label="m">管理员</el-radio>
        </el-form-item>
       <el-form-item>
            <el-button type="primary" @click="submitForm">登录</el-button>
            <el-button @click="resetForm('formLabelAlign')">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-link type="primary" @click="FORGET">忘记密码?</el-link>
           <el-link type="primary" style="margin-left:20px" @click="FORGET">忘记用户名?</el-link>
           <el-link type="primary" style="margin-left:50px;" href="./index.vue">返回首页</el-link>
        </el-form-item>
    </el-form>
  </div>
</template>
<script>
import SIdentify from '../views/identify.vue'
import Router from '@/router/index'
import store from '@/store/index'
  export default {
    data() {
      var validateName = (rule,value,callback)=>{
        if(value==''){
          callback(new Error('请输入用户名'));
        }else{
          callback();
        }
      };
      var validatePassword=(rule,value,callback)=>{
        if(value==''){
          callback(new Error('请输入密码'));
        }else{
          callback();
        }
      };
      var validateType=(rule,value,callback)=>{
        if(value==''){
          callback(new Error('请输入验证码'));
        }else{
          callback();
        }
      };
      return {
        labelPosition: 'right',
        radio:'p',
        formLabelAlign: {
          name: '',
          password: '',
          type: ''
        },
        identifyCode:'1234',
        identifyCodes:['0','1','2','3'],
        rules:{
          name:[{validator:validateName,trigger:'blur'}],
          password:[{validator:validatePassword,trigger:'blur'}],
          type:[{validator:validateType,trigger:'blur'}]
        }
      }
    },
    components:{
      SIdentify
    },
    methods:{
          FORGET(){
              this.$router.push('/forgetPassorUser');
          },
          randomNum (min, max) {
            return Math.floor(Math.random() * (max - min) + min)
              },
          refreshCode () {
            this.identifyCode = '';
            this.makeCode(this.identifyCodes, 4);
            store.dispatch('setYan1',this.identifyCode);
            },
          makeCode (o, l) {
            for (let i = 0; i < l; i++) {
            this.identifyCode += this.identifyCodes[
            this.randomNum(0, this.identifyCodes.length)
                ]
            }
          },
          submitForm(){
            var user = {
              username:this.formLabelAlign.name.trim(),
              password:this.formLabelAlign.password.trim(),
              login_type:this.radio
            };
            var yanzhengma = store.state.yanzhengma;
            // var userna = this.formLabelAlign.name;
            if(this.formLabelAlign.type==yanzhengma){
              this.axios.post('/api/shopping/login.php',user).then((res)=>{
                if(res.status==200 && res.data!="用户名或密码错误"&&res.data!="没有此用户"){
                  store.dispatch('setUsername',res.data.username);
                  store.dispatch('setuserphone',res.data.phone);
                  store.dispatch('setuseremail',res.data.email);
                  store.dispatch('setFlag2',false);
                  // store.dispatch('setMarketname',res.data.marketName);
                  // store.dispatch('setMarkettype',res.data.marketType);
                  // store.dispatch('setMarketauthor',res.data.marketAuthor);
                  // store.dispatch('setMarketemail',res.data.marketEmail);
                  // store.dispatch('setMarketphone',res.data.marketPhone);
                  store.dispatch('setUserid',res.data.user_id);
                  if(this.radio=="m"){
                    this.axios.post("/api/shopping/managUser.php").then(res=>{
                      if(res.data!="error"){
                        store.dispatch('setmanaguser',res.data);
                      }
                    });
                    this.axios.post("/api/shopping/managShop.php").then(res=>{
                      if(res.data!="error"){
                        store.dispatch('setmanagshop',res.data);
                      }
                    });
                    Router.push('/manage');
                  }else{
                  Router.push('/');
                  }
                }else if(res.data=="没有此用户"){
                  alert("服务器繁忙，稍后重试");
                }
                else{
                  alert(res.data);
                  this.refreshCode();
                  store.dispatch('setFlag2',true);
                }
              }); 
            }

          },
          resetForm(formName){
            this.$refs[formName].resetFields();
          }
    }
  }
</script>
<style>
    .login_style{
        width: 300px;
        border: 1px solid #000;
        margin-top: 200px;
        border-radius: 25px;
        margin-left: 600px;
        background-color: aliceblue;
    }
    body{
      background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F05%2F61%2F78%2F935b4cbb21e48c9.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625013069&t=e8243aae25335bd9fb2c24d5ca6f8319");
      width: 100%;
      height: 516px;
      background-repeat: no-repeat;
      background-size: cover;
      display: block;
      margin: 0 auto;
      box-sizing: border-box;
      overflow-x: hidden;
    }
    .login-code{
      text-align: center;
      margin: 0 auto;
    }
</style>